<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../../pub/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<%@include file="../../pub/resource.jsp"%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ztree.core-3.5.min.js"></script>
<style type="text/css">
body {
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}

ul.ztree {
	margin-top: 10px;
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 220px;
	height: 360px;
	overflow-y: scroll;
	overflow-x: auto;
}
</style>
</head>
<body>
	<form action="${flag }" method="post" class="definewidth m20"
		id="form1">
		<table class="table table-bordered table-hover definewidth m10">
			<tr>
				<td width="10%" class="tableright">登录名：</td>
				<td class="tableleft"><input type="text" name="username"
					id="username" value="${account.username }"
					<c:if test="${!empty account }">readonly="readonly"</c:if> />
					&nbsp;<span class="inputWarning">*</span> <span id="divUserName"
					class="msg"></span></td>
			</tr>
			<tr>
				<td class="tableright">昵称：</td>
				<td class="tableleft"><input type="text" name="nickName"
					id="nickName" value="${account.nickName }" />&nbsp;<span
					class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright">真实姓名：</td>
				<td class="tableleft"><input type="text" name="name" id="name"
					value="${account.name }" />&nbsp;<span class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright">性别：</td>
				<td class="tableleft"><input type="radio" id="sex" name="sex"
					value="1"
					<c:if test="${empty account ||account.sex==1 }">checked="checked"</c:if>>男&nbsp;&nbsp;
					<input type="radio" id="sex" name="sex" value="0"
					<c:if test="${account.sex==0 }">checked="checked"</c:if>>女</td>
			</tr>
			<tr>
				<td class="tableright">年龄：</td>
				<td class="tableleft"><input type="text" name="age" id="age"
					onkeyup="this.value=this.value.replace(/\D/g,'')"
					onafterpaste="this.value=this.value.replace(/\D/g,'')"
					value="${account.age }" />&nbsp;<span class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright">部门：</td>
				<td class="tableleft"><input id="inputDepartment"
					name="inputDepartment" type="text" readonly value="${dep.name }" />&nbsp;<span
					class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright">角色：</td>
				<td class="tableleft"><select id="role" name="role">
						<option value="-1">--请选择--</option>
						<c:forEach begin="0" step="1" items="${roles }" var="gl"
							varStatus="var">
							<option value="${gl.id }"
								<c:if test="${account.role==gl.id }">selected="selected"</c:if>>${gl.name }</option>
						</c:forEach>
				</select>&nbsp;<span class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright">职位：</td>
				<td class="tableleft"><select id="position" name="position">
						<option value="-1">--请选择--</option>
						<c:forEach begin="0" step="1" items="${positions }" var="gl"
							varStatus="var">
							<option value="${gl.id }"
								<c:if test="${account.position==gl.id }">selected="selected"</c:if>>${gl.name }</option>
						</c:forEach>
				</select>&nbsp;<span class="inputWarning">*</span></td>
			</tr>
			<tr>
				<td class="tableright"></td>
				<td class="tableleft">
					<button type="submit" class="btn btn-primary" type="button"
						onclick="return check();">保存</button> &nbsp;&nbsp;
					<button type="button" class="btn btn-success" name="backid"
						id="backid">返回列表</button>
				</td>
			</tr>
		</table>
		<div id="menuContent" class="menuContent"
			style="display: none; position: absolute;">
			<ul id="treeDemo" class="ztree" style="margin-top: 0;"></ul>
		</div>
		<input type="hidden" id="department" name="department"
			value="${account.department }" /> <input type="hidden"
			id="hidUserNameExist" name="hidUserNameExist" />
		<c:if test="${! empty account }">
			<input type="hidden" id="id" name="id" value="${account.id }" />
		</c:if>
	</form>
</body>

<SCRIPT type="text/javascript">
<!--
	var setting = {
		view : {
			dblClickExpand : false
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			onClick : onClick
		}
	};

	var zNodes = ${json};

	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
				.getSelectedNodes(), v = "";
		nodes.sort(function compare(a, b) {
			return a.id - b.id;
		});
		for ( var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].name + ",";
		}
		if (v.length > 0)
			v = v.substring(0, v.length - 1);
		var cityObj = $("#inputDepartment");
		cityObj.attr("value", v);
		$("#department").val(nodes[0].id);
		hideMenu();
	}

	function showMenu() {
		var departmentObj = $("#inputDepartment");
		var departmentOffset = $("#inputDepartment").offset();
		var departmentWidth = $("#inputDepartment").width();
		$("#menuContent").css({
			left : departmentOffset.left + "px",
			top : departmentOffset.top + departmentObj.outerHeight() + "px",
			width : departmentWidth + "px"
		}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
				event.target).parents("#menuContent").length > 0)) {
			hideMenu();
		}
	}

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		$("#inputDepartment").click(function() {
			showMenu();
		});
		$("#backid").click(function(){
			history.back();
		})
		<c:if test="${empty account }">
		$("#username").blur(function() {
			$("#divUserName").html("");
			if ($(this).val() == "") {
				currentWin.$.dialog({
					content : "必须输入用户名！！！",
					lock : true,
					icon : "warning",
					path : rootPath+"/css"
				});
				return ;
			}
			$.ajax({
				url : "check.do",
				type : "post",
				data : {
					username : $(this).val()
				},
				dataType : "json",
				success : function(data) {
					if (data.success == "error") {
						$("#divUserName").html("");
						$("#hidUserNameExist").val("1");
						alertW(data.msg);
						return;
					}
					$("#hidUserNameExist").val("0");
					$("#divUserName").html(data.msg);
				}
			});
		});
		</c:if>
	});
	
	function check(){
		<c:if test="${empty account }">
		if(trim($("#username").val())==""){
			alertW("用户名不能为空！");
			return false;
		}
		if($("#hidUserNameExist").val()>0){
			alertW("用户名已存在！");
			return false;
		}
		</c:if>
		if(trim($("#nickName").val())==""){
			alertW("昵称不能为空！");
			return false;
		}
		if(trim($("#name").val())==""){
			alertW("姓名不能为空！");
			return false;
		}
		if(trim($("#age").val())==""){
			alertW("年龄不能为空！");
			return false;
		}
		if($("#department").val()==""){
			alertW("请选择部门！");
			return false;
		}
		if($("#role").val()<0){
			alertW("请选择角色！");
			return false;
		}
		if($("#position").val()<0){
			alertW("请选择职位！");
			return false;
		}
		$.ajax({
			url:"${flag }",
			type:"post",
			data:$("#form1").serialize(),
			dataType:"text",
			success:function(data){
				if(data=="success"){
					currentWin.$.dialog({
						id : "id1",
						content : "操作成功！",
						lock : true,
						icon : "succeed",
						path : rootPath+"/css",
						ok:function(){
							window.location = rootPath+"/admin/account/accountIndex.do";
							return true;
						},
						okVal:"关闭"
					});
				}else{
					alertWin("操作失败！","error");
				}
			}
		});
		
		return false;
	}	
	
//-->
</SCRIPT>
</html>